<template>
  <div class="designGrade">
    <div class="designGrade_left">
      <el-form ref="form" label-width="100px">
        <el-form-item label="学院：">
          <div>{{formOne.college}}</div>
        </el-form-item>
        <el-form-item label="班级：">
          <div>{{formOne.empClass}}</div>
        </el-form-item>
        <el-form-item label="学生学号：">
          <div>{{formOne.stuNum}}</div>
        </el-form-item>
        <el-form-item label="学生姓名：">
          <div>{{formOne.stuName}}</div>
        </el-form-item>
        <el-form-item label="毕设题目：">
          <div>{{formOne.topicTitle}}</div>
        </el-form-item>
        <el-form-item label="指导老师：">
          <div>{{formOne.jsName}}</div>
        </el-form-item>
        <el-form-item label="毕设成绩：">
          <div>{{formOne.topicGrade}}</div>
        </el-form-item>
      </el-form>
    </div>

    <div class="designGrade_right">
      <div class="titleDiv">学生完成毕设的情况：</div>
      <el-steps :active="sucNum" finish-status="success" align-center>
        <el-step title="选题" :description="allowWordOne"></el-step>
        <el-step title="初期" :description="allowWordTwo"></el-step>
        <el-step title="中期" :description="allowWordThree"></el-step>
        <el-step title="后期" :description="allowWordFour"></el-step>
      </el-steps>

      <div class="uploadDiv">
        <el-upload
          class="upload-demo"
          ref="upload"
          accept=".doc,.docx"
          :action="url"
          :limit="1"
          :on-success="handleSuccess"
          :on-error="handleError"
          :on-change="openFile"
          :file-list="fileList"
          :headers="uploadHeader"
          :auto-upload="false"
          >
          <el-button slot="trigger" size="small" type="primary" :disabled="showUpload">选择文件</el-button>
          <el-button style="margin-left: 20px;" size="small" type="success" :disabled="showUpload" @click="openDialog">确认上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传doc\docs文档</div>
        </el-upload>
      </div>
      
      <div class="hintWord">提示：如果有未通过的阶段或者对此有异议的，请自行联系自己的指导老师协商！</div>
    </div>

<!-- 模态框 -->
    <el-dialog title="选择进度类型" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="进度类型：" :label-width="formLabelWidth" prop="region">
          <el-select v-model="form.region" placeholder="请选择进度类型">
            <el-option label="初期" value="初期"></el-option>
            <el-option label="中期" value="中期"></el-option>
            <el-option label="后期" value="后期"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { axiosRequest } from "@/utils/axiosRequest";
export default {
  data() {
    var userInfo = JSON.parse(window.sessionStorage.getItem('userInfo')).user;
    return {
      listNum: userInfo.loginCode, //当前登录的信息
      listName: userInfo.empName,
      formOne: {
        topicStep: '',
        firstStep: '',
        interimStep: '',
        laterStep: '',
      },
      // 步骤UI组件
      activeNum: 0,
      allowWordOne: "",
      allowWordTwo: "",
      allowWordThree: "",
      allowWordFour: "",
      // 上传
      fileList:[],
      dialogFormVisible: false,
      form: {},
      formLabelWidth: '120px',
      file:"",
      showUpload: false,

      // 验证
      rules: {
          region: [
            { required: true, message: '请选择进度类型', trigger: 'change' }
          ],
      }
    }
  },

  props: {
    url: {
        type: String,
        default:
            process.env.VUE_APP_BASEURL + "/fileInfo/upload",
      },
      uploadHeader: {
        type: Object,
        default: function () {
          return {token: JSON.parse(sessionStorage.getItem("userInfo")).token};
        },
      }
  },

  methods: {
    // 打开模态框
    openDialog() {
      var self = this;
      self.dialogFormVisible = true;
      self.form = {};
    },

    // 上传文件
    submitUpload() {
      this.$refs.upload.submit();
      this.dialogFormVisible = false;
    },

    // 上传文件和判断文件类型
    openFile(file){
      var self = this;
      self.file = file;
      let fileName = self.file.name;
      let pos = fileName.lastIndexOf(".");
      let lastName = fileName.substring(pos, fileName.length);
      if (
        lastName.toLowerCase() !== ".docx" && lastName.toLowerCase() !== ".doc"
      ) {
        self.$message.error("文件必须为.doc .docx类型");
        self.$refs.upload.clearFiles();
      }
    },

    // 上传文件成功
    handleSuccess(){
      var self = this;
      let addForm={
        fileSign: self.form.region,
        stuNum: self.listNum,
        stuName: self.listName,
        fileName: self.file.name,
      }
      axiosRequest("post","/fileInfo/save",addForm);
      self.$message({
        message: "上传文件成功！！！",
        type: 'success'
      });
      setTimeout(() => {
        self.$refs.upload.clearFiles();
      }, 1000);
    },

    // 上传文件失败
    handleError() {
      this.$message({
        message: "上传文件失败！！！",
        type: 'error'
      });
    },

    // 请求后台题目数据
    gettableList(){
      var self = this;
      axiosRequest("get","/topicInfo/listAll",null).then((res) => {
          if (res.data.code === 200) {
              self.formOne = res.data.data.find( function(e) {
                return e.stuNum == self.listNum;
              })
              if(JSON.stringify(self.formOne) !== undefined) {
                self.showUpload = false;
                self.allowWordOne = self.formOne.topicStep;
                self.allowWordTwo = self.formOne.firstStep;
                self.allowWordThree = self.formOne.interimStep;
                self.allowWordFour = self.formOne.laterStep;
              } else {
                self.formOne = {};
                self.showUpload = true;
                self.$alert('同学您还未选择毕设题目，请先选择题目才能进行该页面的操作！', '提示：', {
                      confirmButtonText: '确定',
                    });
              }
              
          } else {
              self.$message({
                showClose: true,
                message: '错了哦，请求信息失败了！！！',
                type: 'error'
              });
            }
        });
    },
  },

  computed: {
    sucNum() {
      var self = this;
      var goNext = true;
      if(self.allowWordOne == "通过"){
          self.activeNum++;
          if(self.allowWordTwo == "通过" && goNext == true){
            self.activeNum++;
            if(self.allowWordThree == "通过" && goNext == true){
              self.activeNum++;
              if(self.allowWordFour == "通过"){
                self.activeNum++;
              }else{
                self.activeNum = 3;
                goNext = false;
                // console.log(4);
              }
            }else{
              self.activeNum = 2;
              goNext = false;
              // console.log(3);
            }
          }else{
            self.activeNum = 1;
            goNext = false;
            // console.log(2);
          }
      }else {
        self.activeNum = 0;
        goNext = false;
        // console.log(1);
      }

      return self.activeNum;
    }
  },

  mounted: function() {
    var self = this;
    self.gettableList();
  },
}
</script>

<style lang="less" scoped>
.designGrade {
  padding-left: 10px;
  position: relative;
  display: flex;
}

.designGrade_left,.designGrade_right {
  width: 50%;
}

.titleDiv {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 600;
}

.el-steps {
  margin-top: 30px;
}

.uploadDiv {
  margin-top: 30px;
}

.hintWord {
  margin-top: 30px;
  font-size: 14px;
  color: red;
  letter-spacing: 3px;
  line-height: 25px;
}

</style>
